<template>
	<view class="content">
		<dlContacts ref="jContacts" :myList="myList" @confirm="contactsConfirm"></dlContacts>
		<view class="alert-wrapper center" :style="{'left':alertTop}">
			<view class="alert-inner center colum">
				<view class="f34">
					创建群组
				</view>
				<view class="input_box">
					<input type="text" placeholder="请输入群组名"/>
					<input type="text" placeholder="请输入群组描述"/>
				</view>
				<view class="btn center cfff f30">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import dlContacts from '@/components/dl-contacts/dl-contacts.vue';

export default {
	components: {
		dlContacts
	},
	data() {
		return {
			userList:[],
			alertTop:'100%',
			myList: [
				{
					id: 1,
					name: 'z朱海'
				},
				{
					id: 3,
					name: ' '
				},
				{
					id: 4,
					name: '林二'
				},
				{
					id: 7,
					name: '  程紫衣'
				},
				{
					id: 9,
					name: '翁富翁'
				},
				{
					id: 10,
					name: '我'
				},
				{
					id: 11,
					name: '石更硬'
				},
				{
					id: 12,
					name: '..私教'
				},
				{
					id: 13,
					name: '!)陈靖南'
				},
				{
					id: 14,
					name: '翁啊啊啊啊'
				}
			]
		};
	},
	onReady() {
		this.$refs.jContacts.show();
	},
	methods: {
		contactsConfirm(res) {
			console.log(res);
			this.userList=res
			this.changealert()
		},
		changealert() {
			this.alertTop==0?this.alertTop='100%':this.alertTop=0
		}
	}
};
</script>
<style lang="scss">
	.alert-inner{
		width:674rpx;
		height:431rpx;
		background:rgba(255,255,255,1);
		border-radius:12rpx;
		margin-top: 120rpx;
		.btn{
			width:630rpx;
			height:80rpx;
			background:rgba(2,151,254,1);
			border-radius:4rpx;
			margin-top: 20rpx;
		}
		.input_box{
			width:630rpx;
			height:202rpx;
			background:rgba(242,243,245,1);
			border-radius:8rpx;
			input{
				height: 83rpx;
				line-height: 83rpx;
				margin: 0 20rpx;
				border-bottom: 1rpx solid #E0E0E0;
			}
		}
		.f34{
			margin: 30rpx auto 37rpx;
		}
	}
</style>
